Giphy 是一個匯集各種 GIF 供人使用的平台。使用者們可以在這平台上搜尋 GIF、看看哪些 GIF 正當紅，可以上傳自己的 GIF，或使用 Giphy 提供的工具製作 GIF。

https://media.giphy.com/media/xT9IgpernHLP5eWOY0/giphy.gif

由於現在社群媒體跟聊天應用軟體競爭激烈，在這些平台上開發讓使用者黏著依賴的互動方式非常重要，就像貼圖之於 Line 。而 GIF 圖當然也成為被推廣的工具之一。現在許多聊天軟體或討論區，都會做出易於讓使用者搜尋 GIF 的 UI。這些 GIF 要從哪裡來呢，很多都是從 Giphy 來的。

今天就來使用看看 Giphy API。

先取得 API Key：

來看看文件。

Giphy 主要有兩種 resource，而使用那個 resource API 有這些功能

• GIF ： 搜尋、翻譯、流行、隨機、使用 ID 尋找
• Stickers：搜尋、翻譯、流行、隨機

GIF 是什麼大家都知道了吧，而 Stickers 基本上是類似 Line 的動貼圖，可以放在照片上製作 GIF。所以所有的 Endpoint 都是針對這兩種東西去抓相關資料。

來仔細說明一下 GIF 類別裡的 Endpoint：

• search ：使用關鍵字搜尋 Giphy 資料庫裡面的 GIFs
• translate：將文字或短句轉換成 GIF 來優化搜尋功能
• trending：呈現 Giphy 編輯群精選的熱門 GIFs
• random：隨機抓出一個 GIF，可以給出一個 tag 參數過濾特定標籤

不管有沒有選好想要使用的 API Endpoint ，都來使用 Giphy 的 API Explorer 玩一下。

因為 Giphy API 真的很簡單啊，好像沒什麼好講的，就先貼上基礎 API Request 的 code (根本每篇文章都一樣就是了）

var apiKey ='Mrjdc0YDiu0GDGzkciE04Av5N2SJ1zSN';
var query = 'cat';
var url = "https://api.giphy.com/v1/gifs/search?q="+query+"&api_key="+apiKey;

function makeRequest() {
  xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var response = JSON.parse(this.responseText);
    console.log(response);
  };
  xhr.open(
    "GET",
   url,
    true
  );
  xhr.send();
}
makeRequest();

得到的 Response是這樣：

把 Response loop 出來的部分，跟 Nutritionix API 那一篇一模一樣，我就不重複寫了。

成果

Codepen 連結